<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纹理图片</title>
    <script src="../dat.gui.js"></script>
    <script src="../three.min.js"></script>
</head>
<body onload="threeStart()">
    <script>
        const width  = window.innerWidth
        const height = window.innerHeight
        var renderer;
        function initRenderer() {
            renderer = new THREE.WebGLRenderer()
            renderer.setSize(width,height)
            renderer.setClearColor(0x000000,1)
            document.body.appendChild(renderer.domElement)
        }
        var scene;
        function initScene() {
            scene = new THREE.Scene()
        }
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
            camera.position.set(0,0,800)
            camera.up.set(0,1,0)
            camera.lookAt(new THREE.Vector3(0,0,0))
        }
        var mesh;
        var gui;
        var param;
        var texture;
        function initMesh() {
            //gui
            gui = new dat.GUI()
            param = {
                x: 1,
                y: 1,
                wrapS: THREE.RepeatWrapping,
                wrapT: THREE.RepeatWrapping
            }
            gui.add(param,"x",1,6).name("x方向数量")
            gui.add(param,"y",1,6).name("y方向数量")
            gui.add(param,"wrapS",1000,1002).name("wrapS方式").step(1)
            gui.add(param,"wrapT",1000,1002).name("wrapT方式").step(1)
            //物体
            var geometry = new THREE.BoxGeometry(300,300,300)
            var material;
            //相片加载
            var loader = new THREE.TextureLoader()
            loader.load(
                '../temp/test3.jpg',
                function(d) {
                    texture = d
                    texture.repeat.x = param.x
                    texture.repeat.y = param.y
                    texture.wrapS = param.wrapS
                    texture.wrapT = param.wrapT
                    texture.needsUpdate = true
                    material = new THREE.MeshBasicMaterial({
                        map: texture
                    })
                    console.log("相片加载成功")
                    mesh = new THREE.Mesh(geometry,material)
                    scene.add(mesh)
                }
            )
        }
        function changeTexture() {
            if(texture != null) {
                texture.offset.x+=0.01
                texture.offset.y+=0.01
                texture.repeat.x = param.x
                texture.repeat.y = param.y
                texture.wrapS = param.wrapS
                texture.wrapT = param.wrapT
                texture.needsUpdate = true
            }
        }
        function render() {
            requestAnimationFrame(render)
            changeTexture()
            mesh.rotation.x = mesh.rotation.x+0.01
            mesh.rotation.y = mesh.rotation.y+0.01
            renderer.render(scene,camera)
        }
        function threeStart() {
            initRenderer()
            initScene()
            initCamera()
            initMesh()
            render()
        }
    </script>
</body>
</html>